<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="<c:url value="/styles/jquery.autocomplete.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/jquery.bt.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/ui-theme/jquery-ui-1.8.16.custom.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/jquery.dialogr.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/msgbox/jquery.msgbox.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/jqgrid/ui.jqgrid.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/jquery.contextMenu.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/table-sorter/blue/style.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c_rt:url value="/styles/jlayout/jlayout.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/dynatree/ui.dynatree.css" />" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="<c:url value="/styles/menu/dropdown.css" />" type="text/css" media="screen, projection">
	
	<link rel="stylesheet" href="<c:url value="/styles/fileuploader.css" />" type="text/css" media="screen, projection">
	<style type="text/css">
	<!--
	input[type="text"] { font-family: courier new; font-size: 11px; color: #000000;
		-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
		height:16px;
	}
	select { height:20px;background:#DFEFFC;font-family: courier new; /*font-size: 11px;*/ /*color: #000000;*/ border: #09C; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
	
	fieldset{
		-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
	}
	
	-->
	.west .panel {
				width: 100%;
				display: inline-block;
				overflow: auto;
			}
					
	</style> 
	
	<script type="text/javascript" src="<c:url value="/scripts/jquery-1.4.min.js" /> "></script>
	
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/fileuploader.js" /> "></script>
	
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.history.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/json.min.js" /> "></script>
  	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.autocomplete.min.js" /> "></script> 
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.bt.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.validate.min.js" /> "></script> 
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.blockUI.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery-ui-1.8.16.custom.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.ui.datepicker-es.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/ui.dialogr.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.msgbox.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.contextMenu.min.js" /> "></script>

	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.tablesorter.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.tablesorter.pager.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.tablesorter.filter.js" /> "></script>	

	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jquery.metadata.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jquery.sizes.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jlayout.border.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jlayout.grid.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jlayout.flexgrid.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jlayout.flow.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jlayout/jquery.jlayout.js" /> "></script>
	<script type="text/javascript" src="<c_rt:url value="/scripts/plugins-jquery/jquery.dynatree.min.js" /> "></script>

	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jqgrid/grid.locale-es.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jqgrid/jquery.jqGrid.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/menu.dropdown.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.countdown.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/jquery.meio.mask.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/jLog.min.js" /> "></script>
	
	<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/flexpaper/flexpaper_flash.js" /> "></script>
	
	<script type="text/javascript" src="<c:url value="/scripts/eps_funciones/Utiles_Autocompleta.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/eps_funciones/Utiles_MensajesDialogo.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/eps_funciones/misFunciones.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/eps_funciones/misBotones.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/scripts/dom/principal_dom.js" /> "></script>
	<title> .::SISTEMA DE GESTION DE TOMA DE LECTURAS::.</title>
	</head>
	<body class="{layout: {type: 'border', resize: false, hgap: 2,vgap:1}}">
		<div class="north">
			<!-- <h1><span class="highlight"> USUARIO :  ${usuario.nombre}<span id="id_usuario" style="visibility: hidden">${usuario.dni}</span> </span> Sistema Integrado de Gestion Administrativa <a href="<c:url value="/deslogeo"/>"><img src="<c_rt:url value="/images/exit_system.png" />" border="0" align="middle" /></a></h1> --> 
			<table width="100%">
					<tr >
						<td align="left" >
							<table width="100%">
								<tr>
									<td>
										<span class="highlight">Su Sesion expira en <SPAN id="clock_session"></SPAN></span>
										
									</td>
									<td align="center">
										<span class="highlight" id="titulo_principal"><b>SISTEMA DE GESTION DE TOMA DE LECTURAS </b></span>
										
										
									</td>
									
								</tr>
							</table>
						</td>
						<td align="right">
							<span id="id_usuario" style="visibility: hidden">${usuario.dni}</span><img src="<c_rt:url value="/images/preferences-user.png" />" border="0" align="top" /><span class="highlight"> USUARIO :  ${usuario.nombre}</span>
						</td>
						<td align="right" style='width:45px;'>
						    <div >
							<div >
								<dl style="" class="dropdown">
								   <dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
									<dd>
										<ul id="ulglobal">
											 <li><a  href="#frm_cambio_clave" class="remoto" ><span>Cambiar Clave</span></a></li>
											<sec:authorize ifAllGranted="ROLE_ADMIN_WEB">
										                <li><a href="#actualizar_datos" class="operacion_remota"><span>Actualizar Datos</span></a></li>  
									        </sec:authorize>
											<li><a href="<c:url value="/deslogeo"/>">Salir</a></li>
									  </ul>
								   </dd>
								</dl>
							</div>
							</div>
						</td>
					</tr>
			</table>
		</div>
		<div class="center">
			<div class="panel">
				<div class="ui-state-default" style="padding:4px;">Contenido</div>
				<!--<div id="datepicker"></div>-->
				<table align="center" width="95%">
				<tr >
				<td >
				<!-- <h2>Ventana Principal</h2> -->
				<div id="contenedor">	
					<div align="center" align="center"
						style="margin: 0 auto; width: 450px; background-color: #FFFFFF; margin-top: 150px" >
					<table align="center" width="300px">
						<tr>
							<td><img src="<c_rt:url value="/images/logo_principal.jpg" />" border="0" align="middle" /></td>
							
						</tr>
					</table>
					</div>
					
				</div>

				</td >
				</tr >
				</table >
			</div>
			
		</div>
		<!--<div class="west {layout: {type: 'grid', columns: 1, resize: false}}">
			<div class="panel">
				<div class="ui-state-default" style="padding:4px;">Panel 1</div>
				<!--<div id="datepicker"></div>

			</div>
			<div class="panel">
				<div class="ui-state-default" style="padding:4px;">Panel 2</div>
				
			</div>
			
		</div>-->
		
		<div class="west {layout: {type: 'grid',  resize: false,columns:1}}">
			
			<div class="panel" >
				
				<div id="accordion"  >
					<h3><a href="#" >Opciones Generales</a></h3>
					<div class="trio" style="height:300px">
					  <ul>	
				      <li><a href="#frm_inicial" >Principal</a></li>
				      </ul>
					</div>
					<h3><a href="#" >Opciones Generales</a></h3>
					<div class="trio">
									      <ul>
									      	 <sec:authorize ifAllGranted="ROLE_PEDIDOS">
											        <li class="expanded folder">Cuadro de Necesidades
											        <ul>
											          <li><a href="#frmregistro_necesidades" >Registrar</a></li>
		
											        </ul>
											        </li>
											        <li class=" folder">Pedidos
											        <ul>
											          <li><a href="#frmpedidos?pedido_normal=true" >Registrar</a></li>
											          <li><a href="#frm_admin_pedidos" >Consultar</a></li>
											        </ul>
											        </li>
											        <li class=" folder">Reportes
											        <ul>
											          <li><a href="#frm_reporte_necesidades.dialog[550,250]" >Cuadro de Necesidades</a></li>
											        </ul>
											        </li>
											        <li class=" folder">Ayuda
											        <ul>
											          <li><a href="sample-iframe-1.html" target="contentFrame">Welcome</a>
											        </ul></li>
											 </sec:authorize>   
									      </ul>
						      		</div>  
				</div>
			</div>
			<div class="panel" style="height:40%">
				<div class="ui-state-default" style="padding:4px;">Panel 1</div>
				<div id="datepicker"></div>
	
		</div>
		<div id="contexto_spring" style="display: none" title="<c:url value="/" />"></div>
		<div id="temp_sess" style="display: none">${tiempo_session} </div>	
		<div class="south"><table align="center" width="40%" ><tr><td align="center">EQUIPO DE DESARROLLO DE SOFTWARE - EPS GRAU SA. - <span id="basicclock" style="font-weight: bold;"></span> </td></tr></table></div>
	</body>
	
</html>